<template>
    <div class="user">
        <router-link :to="url">
            <img :src="user.avatar" class="user-avatar circle">
            {{user.nickname}}
        </router-link>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "User",
        props: ['user'],
        computed: {
            url() {
                return "/user/" + (this.user._id || this.user.id)
            }
        }
    }
</script>

<style scoped lang="less">
    .user-avatar {
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }
</style>
